import { useState, useEffect, useContext } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AppContext } from '../../store'
import { getLocale } from '../../i18n'
import { dataManager } from '../../utils/dataManager'
import { ThemeBase } from '../../types/theme'
import './index.scss'

function Index() {
  const { state } = useContext(AppContext)
  const i18n = getLocale(state.locale)
  const [themes, setThemes] = useState<ThemeBase[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    console.log('Index页面加载')
    loadThemes()
  }, [])

  const loadThemes = async () => {
    try {
      console.log('开始加载主题')
      const allThemes = dataManager.getAllThemes()
      console.log('主题数量:', allThemes.length, allThemes)
      setThemes(allThemes)
    } catch (error) {
      console.error('加载主题失败:', error)
      Taro.showToast({
        title: i18n.common.error,
        icon: 'none'
      })
    } finally {
      setLoading(false)
    }
  }

  const handleThemeClick = (themeId: string) => {
    // 跳转到主题文物列表页
    Taro.navigateTo({
      url: `/pages/theme/artifacts?id=${themeId}`
    })
  }

  console.log('渲染状态 - loading:', loading, 'themes:', themes.length)

  return (
    <View className='home-container'>
      {/* 头部 */}
      <View className='home-header'>
        <View className='header-bg' />
        <View className='header-content'>
          <Text className='header-title'>{i18n.home.title}</Text>
          <Text className='header-subtitle'>{i18n.home.subtitle}</Text>
        </View>
      </View>

      {/* 主题列表 */}
      <View className='home-body'>
        <View className='section-header'>
          <View className='section-title-wrapper'>
            <View className='section-decoration' />
            <Text className='section-title'>{i18n.home.themeTitle}</Text>
            <View className='section-decoration' />
          </View>
        </View>

        {loading ? (
          <View className='loading-wrapper'>
            <Text className='loading-text'>{i18n.common.loading}</Text>
          </View>
        ) : themes.length === 0 ? (
          <View className='empty-wrapper'>
            <Text className='empty-text'>暂无主题数据</Text>
          </View>
        ) : (
          <ScrollView 
            scrollY 
            className='themes-scroll'
            enableBackToTop
          >
            <View className='themes-grid'>
              {themes.map((theme) => (
                <View
                  key={theme.id}
                  className='theme-card'
                  onClick={() => handleThemeClick(theme.id)}
                >
                  <View 
                    className='theme-card-bg'
                    style={{ backgroundColor: theme.color + '20' }}
                  />
                  <View className='theme-icon-wrapper'>
                    <Text className='theme-icon'>{theme.icon}</Text>
                  </View>
                  <View className='theme-info'>
                    <Text className='theme-name'>
                      {theme.getName(state.locale)}
                    </Text>
                    <Text className='theme-description'>
                      {theme.getDescription(state.locale)}
                    </Text>
                    <View className='theme-count'>
                      <Text className='count-number'>
                        {theme.getArtifactCount()}
                      </Text>
                      <Text className='count-text'>
                        {state.locale === 'zh' ? ' ' : ' '}
                        {i18n.home.artifactCount}
                      </Text>
                    </View>
                  </View>
                  <View 
                    className='theme-card-border'
                    style={{ borderColor: theme.color }}
                  />
                </View>
              ))}
            </View>
          </ScrollView>
        )}
      </View>
    </View>
  )
}

export default Index
